<template>
  <ContainerContent :loading="loading" :pagination="pagination" @run="run">
    <template #header>
      <a-button type="primary" @click="visible = true">
        <i-icons-btn-add />
        申请证书
      </a-button>
      <CloudFilterBar
        v-model="queryParams"
        :run="run"
        :schemes="filterSchemes"></CloudFilterBar>
    </template>
    <a-table
      ref="tableRef"
      v-bind="commonTableProps"
      :columns="columns"
      :data="data"
      @sorter-change="onSorterChange">
      <template #source="{ record }">
        <span>{{ getOptionsLabel(LicenseSourceOptions, record.source) }}</span>
      </template>
      <template #status="{ record }">
        <div v-if="record.apply_result === 1" class="flex gap-x-1 items-center">
          <i-icons-success />
          成功
        </div>
        <div
          v-else-if="record.apply_result === 2"
          class="flex gap-x-1 items-center">
          <i-icons-failed />
          失败
        </div>
        <div v-else class="flex gap-x-1 items-center">
          <i-icons-applying />
          申请中
        </div>
      </template>
      <template #acme="{ record }">
        <text-ell :content="record.acme"></text-ell>
      </template>
      <template #log="{ record }">
        <i-icons-record
          class="cursor-pointer text-7 hover:text-1"
          @click="handleOpenLog(record)" />
      </template>
      <template #action="{ record }">
        <a-link
          :hoverable="false"
          :disabled="record.apply_result !== 1"
          @click="openDetail(record)">
          证书详情
        </a-link>
      </template>
    </a-table>
    <ApplyLicense
      v-model:visible="visible"
      @reload="run"
      @refresh-row="(row) => handleRefreshRow(row)"></ApplyLicense>
    <ApplyLog
      v-model:visible="logVisible"
      v-model:record="logData"
      @refresh-row="(row) => handleRefreshRow(row)"></ApplyLog>
    <LicenseDetails
      v-model="detailVisible"
      :source="detailData?.source ?? 1"
      :cert-id="detailData?.id ?? ''"></LicenseDetails>
  </ContainerContent>
</template>
<script lang="ts" setup>
import type { LicenseListItem } from '@/apis/model/License'
import { getApiCertQueryApi } from '@/apis/modules/license'
import ContainerContent from '@/components/ContentContainer.vue'
import type { CloudFilterBarState } from '@/components/filter-bar/types'
import { useListRequest } from '@/hooks/useListRequest'
import { commonTableProps } from '@/utils/table'
import useTableColumn from './column'
import ApplyLicense from './components/ApplyLicense.vue'
import ApplyLog from './components/ApplyLog.vue'
import { getLog } from './state'
const queryParams = ref<CloudFilterBarState>({})
const { visible } = usePopup()
const { visible: logVisible, open: openLog, data: logData } = usePopup()
const {
  visible: detailVisible,
  open: openDetail,
  data: detailData
} = usePopup()

const { filterSchemes, columns } = useTableColumn()
const { data, loading, run, pagination } = useListRequest(getApiCertQueryApi, {
  params: queryParams,
  immediate: true
})
const { createSortChange } = useTable(run, data)

const onSorterChange = createSortChange(queryParams)
// 刷新当前行数据
function handleRefreshRow(row: LicenseListItem) {
  data.value.forEach((item) => {
    if (item.id !== row.id) return
    Object.assign(item, row)
  })
}
const handleOpenLog = async (record: LicenseListItem) => {
  const res = await getLog(record.id!)
  if (res) openLog(record)
}
</script>
